{% extends "base.html" %}
{% load render_extras %}


{%block info%}
	<div class="top" style="text-align:center">
		<h2>Rank users in delicious network</h2>
		<p>
			How important you are? Who influence you most? Check it out!
		</p>
		<div style="text-align:center;height:40px;margin-top:10px;padding-left:180px;">
			<input type="text" style="height: 15px;float:left;" size="30" id="ranker" name="ranker" value="username">
			<a href="javascript:void(0);" onclick="javascript:goto_user();" class="leo-btn btn-med signin-combo cboxElement blue" id="top-page-signup" style="float:left;">Rank ME</a>
		</div>
		<div style="text-align:center;">
		<span class="error" id="error" style="display:none;clear:both;"></span>
		</div>
	</div>
{%endblock%}



{%block userlist%}
		{% if p %}
		<h3 class="index-title">
			{{ p.name }}
		</h3>

		<div>
					
			<p class="index-intro">{{ p.name }}
			<a id="top-page-signup" class="leo-btn btn-med signin-combo cboxElement small green" href="javascript:void(0)">{{ p.urank }}</a>
			<a id="top-page-signup" class="leo-btn btn-med signin-combo cboxElement small red" href="http://delicious.com/settings/networkadd?networkadd={{p.name}}">Add Friend</a>
			<a id="top-page-signup" class="leo-btn btn-med signin-combo cboxElement small blue" href="http://delicious.com/{{p.name}}">delicious</a>
			</p>
			</p>

					<div class="vertgraph bgraph" style="left:220px;top:15px;">
						<ul>
							<li class="low" style="height: {{p.score|barstyle:"500"}}px;">{{p.score|floatformat:2}}</li>
							<li class="info" style="height: {{p.leaders|barstyle:"200"}}px;">{{p.leaders}}</li>
							<li class="critical" style="height: {{p.followers|barstyle:"5000"}}px;">{{p.followers}}</li>
						</ul>
					</div>
		</div>
		{%endif%}
		<h3 id="community-list" class="index-title">
			{% if p%}
			{{ p.name }}'s
			{% else %}
			del.icio.us users ranked by their influence

			{% endif %}
		</h3>
		<div style="float:right;">
			<a href="javascript:void(0);" onclick="javascript:prev();" class="page_nav page_left" >last page</a>
			<a href="javascript:void(0);" onclick="javascripv:next();" class="page_nav page_right">next page</a>
		</div>
		<div id="loading" style="display:none;float:right;"><img src="/static/loading.gif" /></div>
	<div class="clear"></div>

	<table class="leaderboard">
		<thead>
			<tr>
				<th width=150>Rank</th>
				<th width=150>User</th>
				<th width=200>Influence</th>
			</tr>
		</thead>
	</table>
	<div id="table_container" style="overflow:hidden;height:436px;border-bottom:1px solid #CCCCCC;zoom:1;z-index:999;">
	<table id="table1" style="position:relative;">
			{%for user in users%}

			<tr>
				<td width=180><span style="font-size:1.6em;font-weight:600;padding-left:5px;" title="you are ranked within top  {{user.urank|rankpercent}}%">{{user.urank}} </span></td>

				<td width=180><a class="username" id="user{{user.id}}" href="javascript:void(0)" rel="{{user.name}}">{{user.name}}</a></td>

				<td width=200>
				
					<div class="bar_wrapper clearfix">
						<div class="bar" title="{{user.score}}">
							<span class="energybar" style="left: -{{user.score|barstyle:"120"}}px;"></span>
							<span class="overlay"></span>
						</div>
					</div>

				</td>
			</tr>
		{%endfor%}
	</table>
	</div>

{%endblock%}
